/* 后代选择器（凡是后代均可） */
ol a {
  background-color: antiquewhite;
}

/* 子选择器（亲儿子） */
.nav>a {
  background-color: antiquewhite;
}

/* 并集选择器（集体声明） */
.test>p, div>span {
  background-color: red;
}

/* 伪类选择器 */
/* 链接伪类：
 * 1. a:link 选择所有未被访问的链接
 * 2. a:visited 选择所有已被访问的链接
 * 3. a:hover 选择鼠标指针位于其上的链接
 * 4. a:active 选择活动链接（鼠标按下未弹起的链接）
 * 注意顺序！L-V-H-A，不能颠倒顺序，开发中一般只需要 a 的样式和 a:hover 的样式！
 */
.link a:link {
  background-color: chartreuse;
  text-decoration: none;
}

.link a:visited {
  background-color: gray;
}

.link a:hover {
  background-color: cornflowerblue;
  text-decoration: underline;
}

.link a:active {
  background-color: tomato;
}

/* :focus 伪类选择器，用于选取获得焦点的元素（一般针对光标所在的表单元素） */
input:focus {
  outline: 1px solid #be59d8;
  border: none;
}